<template>
  <KView class="group-bargain-goods">
    <KView class="group-bargain-goods-header">
      <KView class="group-bargain-goods-time">
        <KView class="goods-countdown-text">
          <span v-if="curTimes.type===0">距本场开始:</span>
          <span v-else-if="curTimes.type===1">距本场结束:</span>
          <span v-else-if="curTimes.type===2">本场已结束</span>
        </KView>
        <KView class="goods-countdown-div" v-if="rangeTime!==undefined">
          <countdown-view :time="rangeTime"></countdown-view>
        </KView>
      </KView>
    </KView>
    <KView class="group-bargain-goods-content">
      <KView class="group-bargain-goods-data">
        <KView v-for="(goods,index) in goodsList" :key="`goods_${goods.defId}`">
          <goods-item :class="getItemClassName(index)" :goods="goods" @item-click="itemClick"></goods-item>
        </KView>
      </KView>
      <KView class="group-bargain-goods-more" v-if="loading||pagination.hasNextPage()">
        <sys-loading v-if="loading" :size="60"></sys-loading>
        <KView v-else class="group-bargain-goods-btn" @click="lookMore">查看更多</KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import CountdownView from 'common/countdownView';
  import SysLoading from 'common/sysLoading';
  import GoodsItem from './goodsItem';

  import timeCountdown from 'mixins/timeCountdown';

  export default {
    mixins: [timeCountdown('curTimes')],

    props: {
      goodsList: {
        type: Array,
        required: true
      },
      curTimes: {
        type: Object,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      }
    },

    data() {
      return {
        loading: false,
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      lookMore() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.nextDataFun().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      getItemClassName(index) {
        if (index % 2 === 0) {
          return 'goods-view-left';
        }
        return 'goods-view-right';
      },

      itemClick(goods){
        let defId = goods.defId;
        if (this.isMiniprogram) {
          if (goods.type === 0) {
            window.open(`/goodsGroupDetail/${defId}`);
          } else {
            window.open(`/goodsBargainDetail/${defId}`);
          }
        } else {

        }
      }
    },

    components: {
      CountdownView,
      SysLoading,
      GoodsItem
    }
  };

</script>

<style lang="scss">
  .group-bargain-goods {
    height: 100%;

    .group-bargain-goods-header {
      height: formatPx(42);
      text-align: center;

      .group-bargain-goods-time {
        display: inline-block;

        >div {
          text-align: left;
          float: left;
          height: 100%;
        }

        .goods-countdown-text {
          line-height: formatPx(42);
          font-size: formatPx(30);
          color: #333333;
        }

        .goods-countdown-div {
          width: formatPx(360);
          margin-left: formatPx(12);
        }
      }
    }

    .group-bargain-goods-content {
      margin-top: formatPx(30);
      padding: 0 formatPx(30);
      height: calc(100% - #{formatPx(75)});
      overflow: auto;

      .group-bargain-goods-data {
        display: flex;
        flex-wrap: wrap;

        >div {
          width: 50%;
          height: formatPx(485);
          margin-bottom: formatPx(35);

          .group-bargain-goods-item {
            width: formatPx(325);

            &.goods-view-left {
              float: left;
            }

            &.goods-view-right {
              float: right;
            }
          }
        }
      }

      .group-bargain-goods-more {
        height: formatPx(66);
        position: relative;
        margin-bottom: formatPx(35);

        .group-bargain-goods-btn {
          text-align: center;
          width: formatPx(255);
          height: 100%;
          line-height: formatPx(65);
          border: 1px solid #999999;
          font-size: formatPx(30);
          margin: auto;
          border-radius: formatPx(33);
        }
      }
    }
  }

</style>
